import React, {Component} from 'react'
import './ComB.css'

class ComB extends Component {
  // 构造函数，作用是初始化
  constructor() {
    super();
    // 存放数据，类似vue中的data
    this.state = {
      age: 18,
      name: 'Jack Ma',
      hasWude: false,
      value: ''
    }
    // 在构造函数中，统一修改this指向，适用于函数反复调用的情况
    this.click1 = this.click1.bind(this)
  }
  click1() {
    // this.state.age = 16; 这样修改数据，不会触发页面的渲染
    // setState这个函数，会重新渲染页面，会调用render方法。是一个异步的函数
    // setState的第一个参数，是要修改的数据，类型是对象
    // setState的第二个参数是回调函数，在修改数据之后执行，在这里可以获取最新的state
    this.setState({
      age: 16
    }, () => {
      console.log(this.state);
    })
  }
  getArg(arg1, arg2) {
    console.log(arg1);
    console.log(arg2);
  }
  getEvent(arg, e) {
    console.log(arg);
    console.log(e);
  }
  changeVal(e) {
    // console.log(e.target.value);
    this.setState({
      value: e.target.value
    })
  }
  jump(e) {
    console.log(e);
    // 阻止默认事件，写return false不行
    e.preventDefault();
  }
  clickHandler(type, e) {
    console.log(type);
    // 阻止冒泡
    e.stopPropagation()
  }
  clickHandler1(type) {
    console.log(type);
  }
  // 最重要的一个方法：render
  render() {
    return (
      <div>
        <mark>这是我的第二个组件，是一个类组件</mark>
        <p>杭州有个{this.state.age}岁的马老师，他叫{this.state.name},他{this.state.hasWude?'':'不'}讲武德</p>
        <button onClick={this.click1}>ES5:事件1</button>
        <button onClick={()=>this.click1()}>ES6:事件2</button>
        <br />
        {/* es5的调用方法，需要先绑定this，然后才能传参数 */}
        <button onClick={this.getArg.bind(this, 826, this.state.name)}>ES5:传参</button>
        <button onClick={()=>this.getArg(826, this.state.name)}>ES6:传参</button>
        <br />
        {/* es5是隐式传递；es6是显式传递 */}
        {/* 参数的完整顺序：this 自定义参数  预定义参数（e） */}
        <button onClick={this.getEvent.bind(this, this.state.name)}>ES5:事件对象e</button>
        <button onClick={(e)=>this.getEvent(this.state.name, e)}>ES6:事件对象e</button>
        <br />
        {/* 模拟实现v-model的功能 */}
        {/* <input :value="this.state.value" @change="changeVal" /> */}
        <input value={this.state.value} onChange={(e)=>this.changeVal(e)} />
        <p>{this.state.value}</p>
        <a
          href="https://react.docschina.org/"
          target="_blank"
          rel="noreferrer"
          onClick={(e)=>this.jump(e)}
        >React</a>
        <div className="div-big" onClick={(e)=>this.clickHandler('big',e)}>
          <div className="div-small" onClick={(e)=>this.clickHandler('small',e)}>
          </div>
        </div>
        {/* Capture加上这个关键字，使得数据流改为捕获的方式 */}
        <div className="div-big" onClickCapture={(e)=>this.clickHandler1('big',e)}>
          <div className="div-small" onClickCapture={(e)=>this.clickHandler1('small',e)}>
          </div>
        </div>
      </div>
    )
  }
}

export default ComB
